<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<div>
    <h3>边框样式border-style</h3>
    <ul>
        <li style="border-style:none">none 默认无边框</li>
        <li style="border-style:dotted;">dotted 定义一个点线边距</li>
        <li></li>
        <li style="border-style:solid;">solid 定义一个实线边距</li>
        <li></li>
        <li style="border-style:double;">double 定义双实线边距</li>
        <li></li>
        <li style="border-style:groove;">groove 定义凹槽边距，效果取决于边框颜色</li>
        <li></li>
        <li style="border-style:ridge;">ridge 定义隆状边距，效果取决于边框颜色</li>
        <li></li>
        <li style="border-style:inset;">inset 定义嵌入边距，效果取决于边框颜色</li>
        <li></li>
        <li style="border-style:outset;">outset 定义外凸边距，效果取决于边框颜色</li>
        <li style="border-style:hidden;">hidden 隐藏边框</li>
        <li>边距颜色border-color</li>
        <li style="border-style:outset;border-color:red;">outset 定义外凸边距，效果取决于边框颜色</li>
        <li>边距宽度border-width</li>
        <li style="border-style:outset;border-color:red;border-width:14px;">outset 定义外凸边距，效果取决于边框颜色</li>
    </ul>
    <h3>边距单独设置各边</h3>
    <ul>
        <li style="border-top-style:dotted">border-top-style:dotted 上边框</li>
        <li></li>
        <li style="border-top-style:dotted;border-left-style:solid">border-left-style:solid 左边框</li>
        <li></li>
        <li style="border-top-style:dotted;border-left-style:solid;border-bottom-style:double">border-bottom-style:double 下边框</li>
        <li></li>
        <li style="border-top-style:dotted;border-left-style:solid;border-bottom-style:double;border-right-style:groove">border-right-style:groove 右边框</li>
        <li>也可以同时设置不同的border-style:上 右  下 左</li>
        <li style="border-style:groove solid double dotted">同时设置多边框 border-style:groove solid double dotted</li>
        <li>边框简写属性border:2px solid red</li>
        <li style="border:1px groove yellow;outline:2px dotted red">使用简写属性 border:1px groove yellow  同时使用了轮廓outline</li>
    </ul>
</div>

</html>